<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

interface ScoreData {
	collegeName: string
	grade: string
	topStudents: {
		name: string
		score: number
	}[]
}

const currentGrade = ref('2023')
const collegeData = ref<ScoreData[]>([])

// 模拟数据
const mockData: ScoreData[] = [
	{
		collegeName: '软件学院',
		grade: '2023',
		topStudents: [
			{ name: '张三', score: 98 },
			{ name: '李四', score: 96 },
			{ name: '王五', score: 95 },
			{ name: '赵六', score: 94 },
			{ name: '孙七', score: 93 }
		]
	}
	// ... 其他学院数据
]

onMounted(() => {
	initChart()
})

const initChart = () => {
	const chartDom = document.getElementById('scoreChart')
	if (!chartDom) return

	const myChart = echarts.init(chartDom)
	const option = {
		title: {
			text: '各学院成绩TOP5分布'
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['平均分']
		},
		xAxis: {
			type: 'category',
			data: ['软件学院', '交通学院', '机械学院']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '平均分',
				type: 'bar',
				data: [95, 92, 90]
			}
		]
	}

	myChart.setOption(option)
}
</script>

<template>
	<div class="school-score">
		<el-card class="filter-card">
			<el-select v-model="currentGrade" placeholder="选择年级">
				<el-option label="2023级" value="2023" />
				<el-option label="2022级" value="2022" />
				<el-option label="2021级" value="2021" />
			</el-select>
		</el-card>

		<div id="scoreChart" style="width: 100%; height: 400px"></div>

		<el-table :data="mockData" style="margin-top: 20px">
			<el-table-column prop="collegeName" label="学院" />
			<el-table-column prop="grade" label="年级" />
			<el-table-column label="TOP5学生">
				<template #default="scope">
					<el-tag
						v-for="(student, index) in scope.row.topStudents"
						:key="index"
						style="margin-right: 5px"
					>
						{{ student.name }}: {{ student.score }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<style lang="scss" scoped>
.school-score {
	padding: 20px;

	.filter-card {
		margin-bottom: 20px;
	}
}
</style>
